<script setup lang="ts">
import { useRouter } from 'vue-router';
import HealthInfoHome from '@/views/HealthConsult/HealthInfoHome.vue';

const router = useRouter();

// 跳转到自助缴费页面
const goToSelfPayment = () => {
  router.push('/self-payment');
};

// 跳转到患者列表页面
const goToPatientList = () => {
  router.push('/patient-list');
};

const goToOutpatientFee = () => {
  router.push('/outpatient-fee');
};

// 跳转到自助开单页面
const goToSelfOrder = () => {
  router.push('/self-order');
};

// 跳转到在线退款页面
const goToRefund = () => {
  router.push('/refund');
};

// 跳转到在线充值页面
const goToRechargeCard = () => {
  router.push('/recharge-card');
};

// 跳转到候诊查询页面
const goToQueueQuery = () => {
  router.push('/queue-query');
};

// 跳转到AI客服聊天页面
const goToAIChat = () => {
  router.push('/ai-chat');
};

// 跳转到价目查询页面
const goToPriceQuery = () => {
  router.push('/price-query');
};

// 跳转到健康咨询页面
const goToHealthInfo = () => {
  router.push('/health-info/list');
};

// 跳转到就医指南页面
const goToMedicalGuide = () => {
  router.push('/medical-guide');
};

</script>

<template>
  <div class="home-page">
    <van-nav-bar title="首页" />
    <div class="scrollable-content">
      <!-- 轮播图 -->
      <div class="banner-container">
        <van-swipe class="banner-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <div class="banner-content">就诊指南</div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="banner-content">就诊指南2</div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="banner-content">就诊指南3</div>
          </van-swipe-item>
        </van-swipe>
      </div>

      <!-- 门诊服务 -->
      <div class="section-card">
        <div class="section-title"><span class="blue-dot"></span>门诊服务</div>
        <div class="highlight-cards">
          <van-grid :column-num="2" :border="false" :gutter="12">
            <van-grid-item @click="goToPatientList">
              <div class="highlight-card yuyue">
                <div class="service-title">预约挂号</div>
                <div class="service-desc">在线挂号预约</div>
              </div>
            </van-grid-item>
            <van-grid-item @click="goToRechargeCard">
              <div class="highlight-card chongzhi">
                <div class="service-title">在线充值</div>
                <div class="service-desc">就诊卡预存充值</div>
              </div>
            </van-grid-item>
          </van-grid>
        </div>
        <van-grid :column-num="3" :border="false" :gutter="10">
          <van-grid-item icon="search" text="候诊查询" @click="goToQueueQuery" />
          <van-grid-item icon="balance-o" text="自助缴费" @click="goToSelfPayment" />
          <van-grid-item icon="bill-o" text="门诊费用" @click="goToOutpatientFee" />
          <van-grid-item icon="refund-o" text="在线退款" @click="goToRefund" />
          <van-grid-item icon="description" text="报告查询" />
          <van-grid-item icon="records" text="病历查询" />
          <van-grid-item icon="medal-o" text="复诊配药" />
          <van-grid-item icon="cluster-o" text="核酸检测" />
          <van-grid-item icon="certificate" text="体检服务" />
        </van-grid>
        <van-grid :column-num="3" :border="false" :gutter="10">
          <van-grid-item icon="price-tag-o" text="价目查询" @click="goToPriceQuery" />
          <van-grid-item icon="bill-o" text="电子发票" />
          <van-grid-item icon="chat-o" text="AI客服" @click="goToAIChat" />
          <van-grid-item icon="orders-o" text="自助开单" @click="goToSelfOrder" />
        </van-grid>
      </div>

      <!-- 住院服务 -->
      <div class="section-card">
        <div class="section-title"><span class="blue-dot"></span>住院服务</div>
        <van-grid :column-num="4" :border="false" :gutter="10">
          <van-grid-item icon="balance-o" text="住院充值" />
          <van-grid-item icon="bill-o" text="住院费用" />
          <van-grid-item icon="description" text="住院日清单" />
          <van-grid-item icon="send-o" text="病案寄送" />
        </van-grid>
      </div>

      <!-- 医院服务 -->
      <div class="section-card">
        <div class="section-title"><span class="blue-dot"></span>医院服务</div>
        <van-grid :column-num="4" :border="false" :gutter="10">
          <van-grid-item icon="info-o" text="医院介绍" />
          <van-grid-item icon="location-o" text="医院导航" />
          <van-grid-item icon="guide-o" text="就医指南" @click="goToMedicalGuide" />
          <van-grid-item icon="bookmark-o" text="健康百科" @click="goToHealthInfo" />
        </van-grid>
      </div>

      <!-- 健康资讯 -->
      <HealthInfoHome />

      <div class="bottom-space"></div>
    </div>
  </div>
</template>

<style scoped>
.home-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f8f9fa;
  position: relative;
}

.scrollable-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 20px;
}

.van-nav-bar {
  width: 100%;
}

.banner-container {
  margin: 16px 16px 0 16px;
}

.banner-swipe {
  border-radius: 12px;
  overflow: hidden;
  height: 140px;
}

.banner-content {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  background: linear-gradient(90deg, #5b9cff 0%, #6ad1ff 100%);
}

.section-card {
  background: #fff;
  border-radius: 16px;
  margin: 18px 12px 0 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  padding: 12px 8px 8px 8px;
}

.section-title {
  font-size: 16px;
  font-weight: 700;
  margin: 8px 0 12px 4px;
  display: flex;
  align-items: center;
}

.blue-dot {
  width: 6px;
  height: 6px;
  background: #338aff;
  border-radius: 50%;
  margin-right: 8px;
  display: inline-block;
}

.highlight-cards {
  margin-bottom: 12px;
}

.highlight-card {
  height: 70px;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  box-shadow: 0 2px 8px rgba(91, 156, 255, 0.08);
}

.highlight-card.yuyue {
  background: #ffeef0;
  color: #e94e77;
  font-weight: 600;
}

.highlight-card.chongzhi {
  background: #eafff3;
  color: #3ec6a1;
  font-weight: 600;
}

.service-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.service-desc {
  font-size: 12px;
  color: #888;
}

:deep(.van-grid-item__content) {
  padding: 10px 0;
}

:deep(.van-grid-item__icon) {
  font-size: 24px;
}

:deep(.van-grid-item__text) {
  font-size: 14px;
  color: #333;
}

.bottom-space {
  height: 20px;
}
</style>